<template>
  <view class="chat-container">
    <v-statusbar class="status-bar"></v-statusbar>

    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left">
        <view class="back-btn" @click="navigateBack">
          <uni-icons type="left" size="24"></uni-icons>
        </view>
        <view class="page-title">AI课堂问答助手</view>
      </view>
    </view>

    <!-- 聊天内容 -->
    <view class="chat-content">
      <iframe src="https://difys.zjffoj.cn/chat/PfAKFw22BLeukqtD"
        style="width: 100%; height: 100%; min-height: 700px" frameborder="0" allow="microphone">
      </iframe>
    </view>
  </view>
</template>

<script>
import mixins from '@/mixins'

export default {
  mixins: [mixins],
  name: 'ai-chat',
  methods: {
    // 返回上一页
    navigateBack() {
      this.toPage(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";

// 重置页面默认样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.chat-container {
  min-height: 100vh;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden; // 防止容器溢出产生滚动条
}

.header {
  height: 100rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  z-index: 10;
  flex-shrink: 0; // 防止头部被压缩

  .header-left {
    display: flex;
    align-items: center;
    flex: 1;

    .back-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
    }

    .page-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.chat-content {
  position: relative;
  z-index: 100;
  flex: 1;
  overflow: hidden; // 防止内容区域溢出产生滚动条
}

// 防止页面整体滚动
page {
  overflow: hidden;
}
</style>
